<template>
  <!-- 课程管理 -->
  <div class="education-course-box">
    <!-- 标题 -->
    <div style="display: flex; justify-content: space-between">
      <div style="font-size: 26px; margin-bottom: 15px">课程管理</div>
      <div style="margin-right: 50px">
        <el-button type="primary" @click="addCourse">添加课程</el-button>
      </div>
    </div>
    <!-- 行内搜索表单 -->
    <el-form :inline="true" :model="course" class="demo-form-inline">
      <el-form-item label="课程名称">
        <el-input
          style="width: 220px"
          v-model="course.name"
          placeholder="课程名称"
          class="search-input"
        >
          <template slot="suffix">
            <i class="el-icon-search" slot="suffix"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select v-model="course.classify" placeholder="请选择">
          <el-option
            v-for="item in classifyList"
            :key="item.classifyId"
            :label="item.name"
            :value="item.classifyId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="course.status" placeholder="请选择">
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格-显示数据 -->
    <el-table
      class="el-table"
      border
      :data="courseList"
      stripe
      style="width: 100%"
    >
      <el-table-column align="center" prop="name" label="课程名称" width="220">
      </el-table-column>
      <el-table-column
        align="center"
        prop="taskNumber"
        label="任务数"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="220"
      >
      </el-table-column>
      <el-table-column align="center" prop="isPay" label="是否付费" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="审核状态"
        width="120"
      >
        <template slot-scope="scope">
          <!-- 草稿箱 -->
          <el-tooltip
            v-if="scope.row.status === '草稿箱(待审核)'"
            class="item"
            effect="dark"
            content="点击跳转草稿箱查看详情"
            placement="top"
          >
            <el-button style="color: #67c23a" type="text">
              草稿箱(待审核)
            </el-button>
          </el-tooltip>
          <!-- 审核中 -->
          <el-tooltip
            v-if="scope.row.status === '审核中'"
            class="item"
            effect="dark"
            content="点击查看审核进度"
            placement="top"
          >
            <el-button style="color: #409eff" type="text"> 审核中 </el-button>
          </el-tooltip>
          <!-- 审核失败  -->
          <el-tooltip
            v-if="scope.row.status === '审核失败'"
            class="item"
            effect="dark"
            content="点击查看审核失败原因"
            placement="top"
          >
            <el-button style="color: #f56c6c" type="text"> 审核失败 </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="类型" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!--slot-scope="scope" -->
          <el-button class="span" type="text">编辑</el-button>
          <!-- 所有操作都可用 -->
          <el-button
            class="span"
            :disabled="
              !(
                scope.row.status === '草稿箱(待审核)' ||
                scope.row.status === '审核失败'
              )
            "
            type="text"
            >删除</el-button
          >
          <!-- 只有草稿箱(未发布)、审核失败可用 -->
          <el-button class="span" type="text">预览</el-button>
          <!-- 所有操作都可用 -->
          <el-button
            class="span"
            :disabled="
              !(
                scope.row.status === '草稿箱(待审核)' ||
                scope.row.status === '审核失败'
              )
            "
            type="text"
            @click="courseAudit(scope.row)"
            >提交审核</el-button
          >
          <!-- 只有草稿箱(未发布)、审核失败的可用 -->
          <el-button
            class="span"
            :disabled="!(scope.row.status === '审核成功')"
            type="text"
            @click="publishCourse(scope.row)"
            >发布</el-button
          >
          <!-- 只有审核成功的可以 -->
          <el-button
            class="span"
            :disabled="!(scope.row.status === '发布成功')"
            type="text"
            @click="offCourse(scope.row)"
            >下架</el-button
          >
          <!-- 只有发布成功的可以 -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加课程选择课程形式对话框 -->
    <el-dialog
      title="选择课程形式"
      :visible.sync="addCourseDialogVisible"
      width="30%"
    >
      <div style="display: flex">
        <div
          @click="addCourseIndex = 0"
          :class="addCourseIndex === 0 ? 'selectcourse' : ''"
          style="margin: 0px 40px; height: 230px; cursor: pointer"
        >
          <img
            src="http://127.0.0.1:9090/xuecheng-images/live-video.jpg"
            style="width: 150px; height: 150px; margin-top: 20px"
          />
          <div style="margin-left: 40px; margin-top: 10px">直播课程</div>
        </div>
        <div
          @click="addCourseIndex = 1"
          :class="addCourseIndex === 1 ? 'selectcourse' : ''"
          style="height: 230px; cursor: pointer"
        >
          <img
            src="http://127.0.0.1:9090/xuecheng-images/voice-over.png"
            style="width: 150px; height: 150px; margin-top: 20px"
          />
          <div style="margin-left: 40px; margin-top: 10px">录播课程</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="margin-right: 160px"
          type="primary"
          @click="addCourseNext"
          >下一步</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import http_course from '@/https/user/course/course'
import htto_classify from '@/https/user/course/classify'
import Cookies from 'js-cookie'
export default {
  name: 'education-course',
  data() {
    return {
      // 显示在表格上的数据信息
      // //0 1这种要进行数据的修改
      // name: 'java程序设计 ', //课程名称
      // taskNumber: 100, //任务数(章节量)
      // createTime: '2023-11-14 12:15:16', //创建时间
      // isPay: '不付费', //是否付费  0:不付费  1付费
      // status: '草稿箱', //课程状态 1.草稿箱(待审核)  2.审核中  3.审核成功  4.下架  5.发布成功  0.审核失败',
      // type: '录播', // 课程录制形式 0:录播  1:直播
      // // 课程分类,不在前端显示
      // // 录制总时长(由系统计算,不需要用户填写)
      // // 课程作者 cookie中获得
      courseList: [],
      //    行内搜索的数据
      course: {
        name: '', //课程名称
        classify: '', //课程分类
        status: '', //课程状态
      },
      // 课程分类列表
      classifyList: [],
      // 审核状态列表
      statusList: [
        {
          label: '草稿箱(待审核)',
          value: '1',
        },
        {
          label: '审核中',
          value: '2',
        },
        {
          label: '审核成功',
          value: '3',
        },
        {
          label: '下架',
          value: '4',
        },
        {
          label: '发布成功',
          value: '4',
        },
        {
          label: '审核失败',
          value: '0',
        },
      ],
      // 添加课程选择课程形式变量
      addCourseDialogVisible: false,
      addCourseIndex: '',
    }
  },
  methods: {
    // 提交审核
    async courseAudit(row) {
      const result = await http_course.courseAudit(row.courseId)
      if (result.data.code === 200) {
        this.$message({
          message: '提交审核成功',
          type: 'success',
        })
        row.status = '审核中'
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 下架文章
    offCourse(row) {},
    // 发布文章
    publishCourse(row) {},
    // 获得课程分类列表
    async getclassifyList() {
      const result = await htto_classify.getAll(true)
      if (result.data.code === 200) {
        this.classifyList = result.data.data
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 根据userId获取当前的课程列表
    async getCourseList() {
      const userInfo = this.getCookeieUserInfo()
      const result = await http_course.getCourseListByUserId(userInfo.userId)
      if (result.data.code === 200) {
        for (let i = 0; i < result.data.data.length; i++) {
          result.data.data[i].isPay =
            result.data.data[i].isPay === 0 ? '免费' : '付费'
          switch (result.data.data[i].status) {
            case 1:
              result.data.data[i].status = '草稿箱(待审核)'
              break
            case 2:
              result.data.data[i].status = '审核中'
              break
            case 3:
              result.data.data[i].status = '审核成功'
              break
            case 4:
              result.data.data[i].status = '已下架'
              break
            case 5:
              result.data.data[i].status = '发布成功'
              break
            case 0:
              result.data.data[i].status = '审核失败'
              break
          }
          result.data.data[i].type =
            result.data.data[i].type === 0 ? '直播' : '录播'
        }
        this.courseList = result.data.data
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 从cookie中获得用户信息
    getCookeieUserInfo() {
      const info = Cookies.get('userInfo')
      if (info !== undefined) {
        const infoObj = JSON.parse(info)
        Cookies.set('userInfo', info, { expires: 60 })
        return infoObj
      } else {
        return undefined
      }
    },
    // 修改cookie的信息
    setCookeieUserInfo(updateName, updateData) {
      const result = JSON.parse(Cookies.get('userInfo'))
      if (result !== undefined) {
        result[updateName] = updateData
      }
      Cookies.set('userInfo', JSON.stringify(result), { expires: 60 })
    },
    //点击添加课程按钮
    addCourse() {
      this.addCourseIndex = ''
      this.addCourseDialogVisible = true
    },
    // 点击了添加课程下一步
    addCourseNext() {
      if (this.addCourseIndex === '') {
        this.$message({
          message: '请选择课程形式！',
          type: 'warning',
        })
      } else {
        let courseFormat = '直播'
        if (this.addCourseIndex === '0') {
          courseFormat = '录播'
        }
        this.$router.push('/education/add/' + courseFormat)
      }
    },
  },
  created() {
    this.getCourseList()
    this.getclassifyList()
  },
}
</script>

<style lang="scss" scoped>
.education-course-box {
  margin-top: 30px;
  .search-input {
    position: relative;
    cursor: pointer;
  }
  .el-table {
    .span {
      margin: 0 5px;
    }
  }
  .selectcourse {
    border: 1px solid #56d4ff;
  }
}
</style>
